const DEFAULT_TOAST_TIMEOUT = 4000;

export function showToast(option) {
    let arg;
    if (typeof option === 'object') {
        arg = option;
    }
    if (typeof option === 'string') {
        arg = {
            title: option,
        };
    } else {
        throw new Error('未能识别toast参数');
    }
    const timeout = arg.timeout || DEFAULT_TOAST_TIMEOUT;
    const title = arg.title;
    if (!arg.title) {
        throw new Error('必须提供toast的标题');
    }
    // 创建toast
    const toast = document.createElement('div');
    toast.classList.add('toast');
    const infoIcon = `<svg viewBox="64 64 896 896"
        focusable="false" data-icon="info-circle"
        width="20px"
        height="20px"
        fill="#4096ff">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448
            448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8
            8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6
            8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z">
            </path>
        </svg>`;
    toast.innerHTML = `${infoIcon}
        <div class="title">${title}</div>`;
    document.body.append(toast);
    const width = toast.clientWidth;
    toast.style.transform = `translate3d(-${width + 10}px, 0, 0)`;
    toast.style.opacity = '1';
    setTimeout(() => {
        toast.style.transitionProperty = 'opacity';
        toast.style.opacity = '0';
        setTimeout(() => {
            toast.remove();
        }, 1000);
    }, timeout);
}
